import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:moose_app/ui/values/colors.dart';
import 'package:moose_app/ui/values/constants.dart';
import 'package:moose_app/ui/widgets/scroll/scroller_configuration_wrapper.dart';
import 'package:moose_app/ui/widgets/user/user_avatar.dart';

class ATHSignInBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ATHScrollerConfigurationWrapper(
      child: SingleChildScrollView(
        child: Container(
          margin: EdgeInsets.only(bottom: kSize50),
          decoration: BoxDecoration(),
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: kSize20),
            child: Column(
              children: [
                _buildTopUserSignInInfo(),
                _buildSignInDayItem(),
                _buildTaskItem(),
                _buildExchange(),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildExchange() {
    return Container(
      margin: EdgeInsets.only(top: kSize50),
      padding: EdgeInsets.symmetric(horizontal: kSize20),
      decoration: BoxDecoration(
          color: kColor2A2936,
          borderRadius: BorderRadius.all(Radius.circular(kSize40))),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
              padding: EdgeInsets.symmetric(vertical: kSize20),
              child: Text("金币兑换",
                  style:
                      TextStyle(color: Colors.white, fontSize: kFontSize36))),
          StaggeredGridView.countBuilder(
              primary: false,
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              crossAxisCount: 4,
              itemCount: 5,
              mainAxisSpacing: kSize8,
              crossAxisSpacing: kSize8,
              staggeredTileBuilder: (index) {
                return StaggeredTile.fit(2);
              },
              itemBuilder: (context, index) {
                return Column(
                  children: <Widget>[
                    Container(
                        height: kSize300,
                        width: (MediaQuery.of(context).size.width / 2),
                        child: ClipRRect(
                          borderRadius:
                              BorderRadius.all(Radius.circular(kSize20)),
                          child: CachedNetworkImage(
                            imageUrl:
                                'https://gitee.com/shizidada/moose-resource/raw/master/moose/banner/${index + 1}.jpg',
                            fit: BoxFit.fitWidth,
                          ),
                        )),
                    Container(
                      padding: EdgeInsets.symmetric(vertical: kSize16),
                      alignment: Alignment.bottomLeft,
                      child: Text(
                        '有故事的人儿',
                        style: TextStyle(
                            fontSize: kFontSize28, color: Colors.white),
                      ),
                    )
                  ],
                );
              }),
        ],
      ),
    );
  }

  Widget _buildTaskItem() {
    return Container(
      margin: EdgeInsets.only(top: kSize50),
      padding: EdgeInsets.symmetric(horizontal: kSize20),
      decoration: BoxDecoration(
          color: kColor2A2936,
          borderRadius: BorderRadius.all(Radius.circular(kSize40))),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
              padding: EdgeInsets.symmetric(vertical: kSize20),
              child: Text("做任务领金币",
                  style:
                      TextStyle(color: Colors.white, fontSize: kFontSize36))),
          ListView.builder(
              shrinkWrap: true,
              itemCount: 5,
              physics: NeverScrollableScrollPhysics(),
              padding: EdgeInsets.all(kSize8),
              itemBuilder: (context, index) {
                return Container(
                  margin: EdgeInsets.only(bottom: kSize16),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          ClipRRect(
                            borderRadius:
                                BorderRadius.all(Radius.circular(kSize50)),
                            child: Container(
                              height: kSize100,
                              width: kSize100,
                              color: kColorE2,
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(left: kSize20),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  "逛会员中心",
                                  style: TextStyle(
                                      fontSize: kFontSize32,
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold),
                                ),
                                Text("+5金币",
                                    style: TextStyle(
                                      fontSize: kFontSize28,
                                      color: Colors.white,
                                    )),
                              ],
                            ),
                          )
                        ],
                      ),
                      ElevatedButton(
                        onPressed: () {},
                        style: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all(kColorE85C78)),
                        child: Text("去完成"),
                      )
                    ],
                  ),
                );
              }),
          Container(
            margin: EdgeInsets.only(bottom: kSize16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "刷新",
                  style: TextStyle(color: Colors.white, fontSize: kFontSize30),
                ),
                Container(
                  margin: EdgeInsets.only(left: kSize8),
                  child: SvgPicture.asset(
                    "assets/icons/icon_refresh.svg",
                    width: kSize28,
                    color: Colors.white,
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  /// 签到天数信息
  Widget _buildSignInDayItem() {
    return Container(
      height: kSize220,
      margin: EdgeInsets.only(top: kSize50),
      child: ListView.builder(
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: 7,
          itemBuilder: (BuildContext context, int index) {
            return Container(
              margin: EdgeInsets.only(left: kSize16),
              child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(kSize20)),
                child: Container(
                  width: kSize180,
                  decoration: BoxDecoration(color: kColor2A2936),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Text(
                        "第一天",
                        style: TextStyle(
                            color: Colors.white, fontSize: kFontSize32),
                      ),
                      SvgPicture.asset(
                        "assets/icons/icon_coupon.svg",
                        width: kSize80,
                      ),
                      Text(
                        "已领+10",
                        style: TextStyle(color: Colors.white),
                      ),
                    ],
                  ),
                ),
              ),
            );
          }),
    );
  }

  /// 签到顶部信息
  Widget _buildTopUserSignInInfo() {
    return Container(
      margin: EdgeInsets.only(top: kSize30),
      child: Row(
        children: [
          ATHUserAvatar(),
          Flexible(
            child: Container(
              margin: EdgeInsets.only(left: kSize20),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        "已连续签到3天",
                        style: TextStyle(fontSize: kFontSize32),
                      ),
                      Container(
                        child: ElevatedButton(
                          style: ButtonStyle(
                              backgroundColor:
                                  MaterialStateProperty.all(kColor2A2936)),
                          child: Text("签到"),
                          onPressed: () {},
                        ),
                      )
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      ClipRRect(
                          borderRadius:
                              BorderRadius.all(Radius.circular(kSize8)),
                          child: Container(
                            padding: EdgeInsets.symmetric(
                                vertical: kSize6, horizontal: kSize8),
                            decoration: BoxDecoration(
                                color: Colors.yellow,
                                border: Border.all(color: Colors.white),
                                borderRadius:
                                    BorderRadius.all(Radius.circular(kSize8))),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  "188个",
                                  style: TextStyle(fontSize: kFontSize22),
                                ),
                                Container(
                                  margin: EdgeInsets.only(left: kSize8),
                                  child: SvgPicture.asset(
                                      "assets/icons/icon_coupon.svg",
                                      width: kSize28),
                                )
                              ],
                            ),
                          )),
                      Container(
                        margin: EdgeInsets.only(top: kSize16),
                        child: ClipRRect(
                            borderRadius:
                                BorderRadius.all(Radius.circular(kSize8)),
                            child: Container(
                              padding: EdgeInsets.symmetric(
                                  vertical: kSize6, horizontal: kSize8),
                              child: Row(
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceBetween,
                                children: [
                                  Text(
                                    "活动规则",
                                    style: TextStyle(
                                        color: Colors.grey,
                                        fontSize: kFontSize22),
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(left: kSize8),
                                    child: SvgPicture.asset(
                                        "assets/icons/icon_question.svg",
                                        width: kSize28,
                                        color: Colors.grey),
                                  )
                                ],
                              ),
                            )),
                      )
                    ],
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}
